<template>
  <div>
    <moon-switch :value="bool1" @clickEvent="bool1=!bool1" size="big">
      <template v-slot:close>
        <span class="close-text">关</span>
      </template>
      <template v-slot:open>
        <span class="open-text">开</span>
      </template>
    </moon-switch>
    <moon-switch :value="bool2" @clickEvent="bool2=!bool2">
      <template v-slot:close>
        <span class="close-text">off</span>
      </template>
      <template v-slot:open>
        <span class="open-text">on</span>
      </template>
    </moon-switch>
    <moon-switch :value="bool3" @clickEvent="bool3=!bool3" size="small">
      <template v-slot:close>
        <span class="close-text">off</span>
      </template>
      <template v-slot:open>
        <span class="open-text">on</span>
      </template>
    </moon-switch>
  </div>
</template>

<script>
import MoonSwitch from '../lib/MoonSwitch.vue'
export default {
  components: { MoonSwitch },
  data() {
    return {
      bool1: false,
      bool2: true,
      bool3: false,
      sourceCodeTitle: '文字类型',
      sourceCode:
        `<template>
  <div>
    <moon-switch :value="bool1" @clickEvent="bool1=!bool1" size="big">
      <template v-slot:close>
        <span class="close-text">关</span>
      </template>
      <template v-slot:open>
        <span class="open-text">开</span>
      </template>
    </moon-switch>
    <moon-switch :value="bool2" @clickEvent="bool2=!bool2">
      <template v-slot:close>
        <span class="close-text">off</span>
      </template>
      <template v-slot:open>
        <span class="open-text">on</span>
      </template>
    </moon-switch>
    <moon-switch :value="bool3" @clickEvent="bool3=!bool3" size="small">
      <template v-slot:close>
        <span class="close-text">off</span>
      </template>
      <template v-slot:open>
        <span class="open-text">on</span>
      </template>
    </moon-switch>
  </div>
</template>

<script>
import MoonSwitch from '../lib/MoonSwitch.vue'
export default {
  components: { MoonSwitch },
  data() {
    return {
      bool1: false,
      bool2: false,
      bool3: false
    }
  }
}
<` + '/script>'
    }
  }
}
</script>
